In this second section of the course, we'll start with installing electron, getting the course code
ready and covering key concepts for developing with electron.
First up on the electron homepage, we see that electron is installed as a local development dependency,
meaning we need the project code first.
As mentioned, I've created a GitHub repo for the course code.
So over to GitHub dot com slash tech academy TV slash master electron link in the lesson resources.
From here, you can either download the project or clone it using git, I'll do the latter.
So copy the CRL over to the terminal and in my home directory.
Not that this location matters too much git clone that you are all cloning into a new directory called
Electron.
All done, so change into that project Grippo.
And there we have it, everything will need to work with throughout the majority of this course, I'll
open the project in my editor, we have this main JS file, which will be the main entry point of the
application, although we'll cover the project structure in the next lesson and here package.
Jason, this being where we define the project dependencies, I have two development dependencies.
Electron itself and node one again will cover this node one module in the next lesson.
Notice, however, that this entry marking electron as a development dependency is exactly what we saw
on the home page here.
NPM I for install with a D flag, the latest stable version of electron this D flag simply telling NPM
to save this as a development dependency in package.
Jason, exactly as we already have it here in the project code.
Then back in the terminal we can install all of the project dependencies listed in Package Dodgson by
running NPM install.
That downloads Bolds and done list our project, installed modules NPM list with a depth of zero, meaning
only show top level modules, not their dependencies as well.
Enter and as expected, we see our two dependencies that's been installed matching what we have in the
package JSON file.
So with our project dependencies installed, we're ready to run the app.
I've already mentioned that Main Doges is the application entry point, which we are telling electron
here on the main entry and then in the NPM scripts section.
I've created a few convenient scripts for us to run with NPM, the first being in RPM's Start Command,
which we'll call Electron in the current directory.
We're only specifying the current directory as Electron will know to look for mindgames from this main
entry here.
But Electron Main Doges will do the same, will cover the remaining two later.
Try that first command in the project directory run npm start enter.
And the app launches, quote, the app head back to the terminal and the process is killed.
Notice, however, when I run this electron command directly leaving nine PM out of the equation, we
get command not found.
There's simply being as NPM will look for the executed command in the local project modules first.
In fact, we can see the script made available by the electron module to do this.
ENCODE underscore modules dot ben.
So a hidden directory electron which assim linked to the climate JS file in the electron module.
Don't worry too much about why or how this happens, but simply know that having electron installed
as a local project dependancy is best, hence it being the way electron tells us to install it.
That said, we can also install and use the electron command line tools globally.
Again, using NPM, we can say NPM install with a G flag for global electron.
I'll forward through this, have it done and now with electron installed globally, the electron command
is available in the terminal.
Run it on its own.
And we get this built in demo demob.
Or, as before, run electron in the project directory.
Our app launches so two ways to run electron applications for development, but will stick to the first
using NPM as the initiator in the next lesson will go over the project code itself and get a better
understanding of the structure of a typical electron app.